<template>
  <div class="main">
    <govheader title="化工产业大脑 · 智能制造诊断" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="margin: 0px;" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 33.509%;">
        <div class="box" style="height: 154px;">
          <div class="title">数据统计</div>
          <div class="content-body" style="margin-top: 16px;">
            <el-row :gutter="10" style="width: 100%;margin-left: 0px;">
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">化工企业数</div>
                  <div class="total-index-value">{{entQty}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div  class="total-index-body">
                  <div class="total-index-title">规上化工企业数</div>
                  <div class="total-index-value">{{gsEntQty}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">已诊断化工企业数</div>
                  <div class="total-index-value">{{ansEntQty}}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">已诊断规上化工企业数</div>
                  <div class="total-index-value">{{andGsEntQty}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="box" style="height: 293px;">
          <div class="title">企业诊断情况</div>
          <div class="content-body" style="margin-top: 15px;">
            <div class="index-body" style="margin-right: 2%;width: 42%;">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">企业诊断率</span>
              </div>
              <div class="index-content">
                <div id="myChart3" style="width: 100%; height: 200px"></div>
              </div>
            </div>
            <div class="index-body" style="width: 55%;">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">已诊断企业排名情况</span>
              </div>
              <div class="index-content">
                <el-table
                  ref="table1"
                  :data="tableData1"
                  max-height="190px"
                  class="ranking-table"
                  :cell-style="{padding:'6px 0px', fontSize: '12px'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px', fontSize: '12px'}"
                  :cell-class-name="tableRowClassName1">
                  <el-table-column type="index" label="排名" width="50" align="center"></el-table-column>
                  <el-table-column prop="name" label="企业名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="score" label="诊断得分" width="80" align="center"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="box" style="height: 297px;margin-bottom: 0px;">
          <div class="title">已诊断企业排名情况</div>
          <div class="content-body">
            <div id="myChart4" style="width: 100%; height: 252px"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="background-color: (255, 255, 255, 0.5);width: 66.491%;">
        <el-row :gutter="10" style="margin-left: 0px;">
          <el-col :span="12">
            <div id="myChart1" style="width: 100%; height: 450px"></div>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10" style="margin: 0px;">
              <el-col :span="12">
                <div class="box" style="height: 225px;margin-bottom: 0px;">
                  <div class="title">企业诊断平均得分占比</div>
                  <div class="content-body">
                    <div class="head-body">
                      <div v-show="averageProportion.length > 0">
                        <div class="head-body-box" v-for="(item, index) in averageProportion" :key="index">
                          <div class="head-body-left" :style="{ 'margin-top': item.leftHeight }">
                            <el-row class="isMove" :gutter="5" style="margin-left: 0px;margin-right: 0px;">
                              <el-col style="white-space:nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.fraction" :span="14">{{ item.fraction }}</el-col>
                              <!-- <el-col :span="8">{{ item.proportion }}%</el-col> -->
                              <el-col style="white-space:nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.number + '家'" :span="10">{{ item.number }}家</el-col>
                            </el-row>
                            <el-row class="isMove" style="width: 35%;padding: 2px 0px;background: #ffffff;margin-left: 0px;margin-right: 0px;">
                              <hr :style="{ background: colorList3[item.fraction] }" style="margin-top: 8px;box-sizing: border-box;width: 15%;height: 1px;border: none;float: left;"/>
                              <div :style="{ background: colorList3[item.fraction] }" style="margin-top: 5px;width: 13%;height: 8px;border-radius: 50%;float: left;"></div>
                              <div :style="{ color: colorList3[item.fraction] }" :title="item.proportion + '%'" style="width: 66%;font-size: 12px; margin-left: 6%; float: left;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.proportion }}%</div>
                            </el-row>
                          </div>
                          <el-tooltip class="item" effect="dark" :content="item.fraction" placement="top">
                            <div class="head-body-right" :style="{ height: item.height, background: colorList3[item.fraction] }" style="width: 10%; cursor: pointer"></div>
                          </el-tooltip>
                        </div>
                      </div>
                      <div v-show="averageProportion.length === 0" style="width: 100%;text-align: center;color: #909399;margin-top: 70px;">
                        暂无数据
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="box" style="height: 225px;margin-bottom: 0px;">
                  <div class="title">各能力域诊断评分情况</div>
                  <div class="content-body">
                    <div class="head-body" style="padding: 0px;">
                      <div id="myChart2" style="width: 100%; height: 170px"></div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin: 10px 0px 0px 0px;">
              <el-col :span="24">
                <div class="box" style="height: 224px;margin-bottom: 0px;">
                  <div class="title">智能制造水平分布情况</div>
                  <div class="content-body" style="padding: 0px;">
                    <div style="overflow: auto;height: 180px;width: 100%;" ref="table3">
                      <div v-show="tableData3.length > 0">
                        <el-collapse>
                          <el-collapse-item v-for="field in tableData3" :key="field.field">
                            <template slot="title">
                              <div style="width: 97%;padding: 0px 5px 0px 0px;font-size: 12px;color: #4B5463;" class="collapse-title">
                                <div :title="field.field" style="float: left;width: 14.2%;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">{{field.field}}</div>
                                <div style="float: right;padding: 9px 0px 0px 0px;height: 40px;width: 84%;">
                                  <div v-for="title in field.fieldTitleList" :key="title.titleName"
                                    style="float: right;height: 30px;text-align: center;line-height: 30px;white-space:nowrap;overflow: hidden;"
                                    :style="{ width: title.rate, backgroundColor: colorList1[title.titleName] }">
                                      <el-tooltip class="item" effect="dark" :content="title.titleName + '[' + title.count + ']'" placement="top">
                                        <span v-if="Number(title.rate.replace('%', '')) > 16">{{title.titleName}}[{{title.count}}]</span>
                                        <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                      </el-tooltip>
                                  </div>
                                </div>
                              </div>
                            </template>
                            <div style="margin-top: 10px;padding: 0px 5px 0px 0px;font-size: 12px;color: #4B5463;">
                              <div style="width: 100%;padding-bottom: 5px;margin-top: 5px;" v-for="question in field.questionList" :key="question.description">
                                  <el-tooltip class="item" effect="dark" :content="question.description" placement="top">
                                    <span style="display:inline-block;margin-left: 5%;width: 27%;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 24px;">
                                      {{question.description}}
                                    </span>
                                  </el-tooltip>
                                <div style="float: right;height: 24px;width: 65%;">
                                  <div v-for="answer in question.answerList" :key="answer.titleName"
                                    style="float: right;height: 24px;text-align: center;white-space:nowrap;overflow: hidden;"
                                    :style="{ width: answer.rate, backgroundColor: colorList2[answer.titleName], color: answer.titleName === 'FI' ? '#FFFFFF' : '#4B5463' }">
                                    <el-tooltip class="item" effect="dark" :content="answer.titleName + '[' + answer.count + ']'" placement="top">
                                      <span v-if="Number(answer.rate.replace('%', '')) > 12">{{answer.titleName}}[{{answer.count}}]</span>
                                      <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    </el-tooltip>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                      <div v-show="tableData3.length === 0" style="width: 100%;text-align: center;color: #909399;">
                        暂无数据
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin: 0px 5px 0px 0px;">
          <div class="box" style="margin-top: 10px;height: 295px;margin-bottom: 0px;">
            <div class="title">填报企业样本情况</div>
            <div class="content-body" style="overflow: hidden;margin-top: 10px;">
              <div style="width: 100%;">
                <el-table
                  :data="tableData2"
                  max-height="245px"
                  class="first-table"
                  :cell-class-name="tableRowClassName2"
                  :cell-style="{padding:'5px 0px', fontSize: '12px', color:'#4B5463'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'5px 0px', fontSize: '12px'}"
                  style="width: 100%;margin-bottom: 20px;"
                  :span-method="arraySpanMethod"
                  row-key="enterpriseName"
                  ref="firstTable"
                  @row-click="clickFirstRowHandle">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-table
                        class="table-in-table second-table"
                        :data="props.row.datas"
                        :header-cell-style="{backgroundColor:'#C4E0FA', color:'#4A6899', padding:'5px 0px', fontSize: '12px'}"
                        :cell-style="{padding:'5px 0px', fontSize: '12px', backgroundColor:'#CDE4FA', color:'#4B5463'}"
                        style="width: 100%;"
                        row-key="fieldName"
                        :span-method="arraySpanMethod"
                        :ref="'secondTable' + props.row.cid"
                        @row-click="clickSecondRowHandle">
                        <el-table-column type="expand">
                          <template slot-scope="props">
                            <el-table
                              class="table-in-table"
                              :data="props.row.datas"
                              :header-cell-style="{backgroundColor:'#BAE3ED', color:'#4A6899', padding:'5px 0px', fontSize: '12px'}"
                              :cell-style="{padding:'5px 0px', fontSize: '12px', backgroundColor:'#CEE5EB', color:'#4B5463'}"
                              style="width: 100%;"
                              row-key="describe">
                              <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                              <el-table-column prop="describe" label="特征项描述"></el-table-column>
                              <el-table-column prop="result" label="提交结果" width="80" align="center"></el-table-column>
                            </el-table>
                          </template>
                        </el-table-column>
                        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                        <el-table-column prop="fieldName" label="准备度域"></el-table-column>
                        <el-table-column prop="score" label="域得分" width="80" align="center"></el-table-column>
                        <el-table-column prop="level" label="域等级" width="80" align="center"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                  <el-table-column prop="enterpriseName" label="企业名称" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="region" label="所在区域" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="industry" label="所属行业" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="evaluationTime" label="评估时间" width="150"></el-table-column>
                  <el-table-column prop="score" label="准备度得分" width="90" align="center"></el-table-column>
                  <el-table-column prop="level" label="准备度等级" width="90" align="center"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      entQty: 0,
      gsEntQty: 0,
      ansEntQty: 0,
      andGsEntQty: 0,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      colorList1: {
        '引领级': '#A885F0',
        '优化级': '#F7702E',
        '集成级': '#F3A52A',
        '规范级': '#00DBD4',
        '规划级': '#00A3FF',
        '启动级': '#CDE4FA'
      },
      colorList2: {
        'FI': '#719CC1',
        'LI': '#8CBAE2',
        'PI': '#BFDAF2',
        'NI': '#DFEAF5',
        'NA': 'rgb(191, 191, 191)'
      },
      colorList3: {
        '0-20分': 'rgb(95, 226, 187)',
        '20-40分': '#5F83FF',
        '40-60分': '#F3A52A',
        '60-80分': '#00DBD4',
        '80-100分': '#00A3FF'
      },
      regionSelect: '',
      regionOptions: [
        { cityCode: '', cityName: '全省' }
      ],
      industrySelect: '',
      industryOptions: [
        { industryCode: '', industryName: '全部化工行业' }
      ],
      yearSelect: '',
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth(), 0)
        }
      },
      option1: '',
      option2: '',
      option3: '',
      option4: '',
      myChart1: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      option1Data: [],
      option1MinData: 0,
      option1MaxData: 1000000,
      option2XData: [],
      option2Data: [],
      option3Data: 0,
      option3Title: '暂无数据',
      option4XData: [],
      option4Bar1Data: [],
      option4Bar2Data: [],
      option4Bar3Data: [],
      option4Bar4Data: [],
      option4Bar5Data: [],
      averageProportion: [],
      table1Interval: null,
      firstTableInterval: null,
      table3Interval: null,
      zfNameflag: true
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  // 调用
  mounted () {
    if (this.zfNameflag) {
      this.yearSelect = new Date().getFullYear() + ''
      this.getSelectList()
      this.getData()
    }
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.firstTableInterval)
    clearInterval(this.table3Interval)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      var divData = null
      if (table.bodyWrapper) {
        divData = table.bodyWrapper
      } else {
        divData = table
      }
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getSelectList () {
      this.$http
        .get(`/home/consult/consultQuestionnaireQuestion/getConsultIndustryList`)
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.industryOptions = [...this.industryOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
      this.$http
        .get(`/home/consult/consultQuestionnaireQuestion/getConsultCityList`)
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.regionOptions = [...this.regionOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    clickFirstRowHandle (row) {
      this.$refs.firstTable.toggleRowExpansion(row)
    },
    clickSecondRowHandle (row, column, event) {
      this.$refs['secondTable' + row.cid].toggleRowExpansion(row)
    },
    getData () {
      this.$http
        .post(`/home/consult/consultQuestionnaireQuestion/getConsultInitZF`, {
          industryCode: this.industrySelect,
          cityCode: this.regionSelect,
          years: this.yearSelect
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.entQty = res.data.entQty
            this.gsEntQty = res.data.gsEntQty
            this.ansEntQty = res.data.ansEntQty
            this.andGsEntQty = res.data.andGsEntQty

            this.option1Data = res.data.ansEntQtyView.cityName.map((item, index) => {
              return {
                name: item,
                value: res.data.ansEntQtyView.entQty[index]
              }
            })
            this.option1MinData = this.option1Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num2 : num1
            }).value

            this.option1MaxData = this.option1Data.reduce((num1, num2) => {
              return num1.value >= num2.value ? num1 : num2
            }).value

            if (res.data.domainAveScoreChart && res.data.domainAveScoreChart.length > 0) {
              this.option2XData = res.data.domainAveScoreChart.map(item => {
                return {
                  name: item.name,
                  max: item.maxScore
                }
              })
              this.option2Data = res.data.domainAveScoreChart.map(item => {
                return item.aveScore
              })
            } else {
              this.option2XData = [
                { name: '控制系统域', max: 12.0 },
                { name: '设备设施域', max: 12.0 },
                { name: '网络支撑域', max: 9.0 },
                { name: '计划调度域', max: 12.0 },
                { name: '质量管理域', max: 13.0 },
                { name: '设备管理域', max: 12.0 },
                { name: '能源管理域', max: 17.0 },
                { name: '安全环保域', max: 13.0 }
              ]
              this.option2Data = [0, 0, 0, 0, 0, 0, 0, 0]
            }

            if (this.entQty !== 0) {
              this.option3Data = (this.ansEntQty / this.entQty * 100).toFixed(2)
              this.option3Title = this.ansEntQty + '/' + this.entQty
            } else {
              this.option3Data = 0
              this.option3Title = '暂无数据'
            }

            this.option4XData = res.data.domainReadinessIndex.domainName
            this.option4Bar1Data = res.data.domainReadinessIndex.minValue
            this.option4Bar2Data = res.data.domainReadinessIndex.quarterValue
            this.option4Bar3Data = res.data.domainReadinessIndex.halfValue
            this.option4Bar4Data = res.data.domainReadinessIndex.threeFourthsValue
            this.option4Bar5Data = res.data.domainReadinessIndex.maxValue

            this.averageProportion = res.data.entAveScore
            if (res.data.entAveScore && res.data.entAveScore.length > 0) {
              let count = res.data.entAveScore.length
              this.averageProportion.forEach((item) => {
                item.proportion = item.proportion * 100
                let proportion = (14 + item.proportion * (100 - 14 * count) / 100).toFixed(0)
                item.height = 150 * (proportion / 100) + 'px'
                item.leftHeight = 150 * (proportion / 100) - 22 + 'px'
              })
            }

            this.tableData1 = res.data.topTenEnt
            this.tableData2 = res.data.entSampleSituation
            this.tableData3 = res.data.distribution

            this.tableData3.forEach(fieldData => {
              let initFieldTitle = [
                { titleName: '引领级', rate: '4%', count: 0 },
                { titleName: '优化级', rate: '4%', count: 0 },
                { titleName: '集成级', rate: '4%', count: 0 },
                { titleName: '规范级', rate: '4%', count: 0 },
                { titleName: '规划级', rate: '4%', count: 0 },
                { titleName: '启动级', rate: '4%', count: 0 }
              ]
              fieldData.fieldTitleList.forEach(fieldTitleData => {
                initFieldTitle.forEach(item => {
                  if (item.titleName === fieldTitleData.titleName) {
                    item.count = fieldTitleData.count
                    let rate = Number(fieldTitleData.rate.replace('%', '')) * 0.76
                    item.rate = (Math.floor((rate + 4) * 100) / 100) + '%'
                  }
                })
              })
              fieldData.fieldTitleList = initFieldTitle

              fieldData.questionList.forEach(question => {
                let initAnswerTitle = [
                  { titleName: 'FI', rate: '6%', count: 0 },
                  { titleName: 'LI', rate: '6%', count: 0 },
                  { titleName: 'PI', rate: '6%', count: 0 },
                  { titleName: 'NI', rate: '6%', count: 0 },
                  { titleName: 'NA', rate: '6%', count: 0 }
                ]
                question.answerList.forEach(answer => {
                  initAnswerTitle.forEach(item => {
                    if (item.titleName === answer.titleName) {
                      item.count = answer.count
                      let rate = Number(answer.rate.replace('%', '')) * 0.7
                      item.rate = (Math.floor((rate + 6) * 100) / 100) + '%'
                    }
                  })
                })
                question.answerList = initAnswerTitle
              })
            })
            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()

            this.getright_table('table1')
            this.getright_table('firstTable')
            this.getright_table('table3')
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    yearChange (value) {
      this.yearSelect = value
      this.getData()
    },
    regionChange (value) {
      this.regionSelect = value
      this.getData()
    },
    industryChange (value) {
      this.industrySelect = value
      this.getData()
    },
    tableRowClassName1 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'ranking-table-row1'
      } else {
        return 'ranking-table-row2'
      }
    },
    tableRowClassName2 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'first-table-row1'
      } else {
        return 'first-table-row2'
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (!row.datas) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [1, 2]
        }
      }
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      let uploadedDataURL = require('./zhejiang.json')
      echarts.registerMap('zhejiang', uploadedDataURL)

      this.option1 = {
        title: {
          text: '各地市企业诊断情况',
          top: '10px',
          textStyle: {
            fontSize: 14,
            width: '100%',
            color: '#1c4ca1'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br>已诊断：  {c}家'
        },
        visualMap: {
          type: 'continuous',
          orient: 'vertical',
          showLabel: true,
          seriesIndex: [0],
          min: this.option1MinData,
          max: this.option1MaxData,
          inRange: {
            color: ['#6ACAC2', '#4DCAF6', '#4DABFF']
          },
          textStyle: {
            color: '#333333'
          },
          bottom: 10,
          right: 10
        },
        series: [
          {
            type: 'map',
            mapType: 'zhejiang', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff'
            },
            map: 'zhejiang',
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: { // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            select: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            data: this.option1Data
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      // this.option2 = {
      //   tooltip: {
      //     formatter: function (item) {
      //       console.log(item)
      //       return 'a'
      //     },
      //     trigger: 'item',
      //     confine: true,
      //     show: true
      //   },
      //   radar: {
      //     indicator: this.option2XData,
      //     radius: '55%',
      //     nameGap: 9,
      //     name: {
      //       fontSize: 10,
      //       color: '#484C52',
      //       lineHeight: 14,
      //       formatter: function (text) {
      //         if (text === '网络支撑域' || text === '能源管理域') {
      //           return text.slice(0, 3) + '\n' + text.slice(3)
      //         } else {
      //           return text
      //         }
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       name: '各能力域诊断评分情况',
      //       type: 'radar',
      //       data: [
      //         {
      //           value: this.option2Data
      //         }
      //       ]
      //     }
      //   ]
      // }
      const source = {
        data: this.option2Data,
        indicator: this.option2XData
      }
      const buildSeries = function (data) {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          arr.splice(index, 1, item)
          return arr
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            lineStyle: {
              color: index === 0 ? 'rgb(84, 112, 198)' : 'transparent'
            },
            tooltip: {
              show: index !== 0,
              confine: true,
              formatter: function () {
                return source.indicator[index - 1].name + '：' + source.data[index - 1]
              }
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }

      this.option2 = {
        tooltip: {},
        radar: {
          // shape: 'circle',
          radius: '52%',
          nameGap: 7,
          name: {
            textStyle: {
              fontSize: 10,
              color: '#484C52',
              lineHeight: 14,
              formatter: function (text) {
                if (text === '网络支撑域' || text === '能源管理域') {
                  return text.slice(0, 3) + '\n' + text.slice(3)
                } else {
                  return text
                }
              }
            }
          },
          // splitNumber: 4,
          // splitArea: {
          //   show: true,
          //   areaStyle: {
          //     color: ['rgba(12,62,129,0)', 'rgba(12,62,129,0.3)', 'rgba(12,62,129,0)', 'rgba(12,62,129,0)']
          //   }
          // },
          // splitLine: {
          //   lineStyle: {
          //     color: '#0c3e81'
          //   }
          // },
          // axisLine: {
          //   lineStyle: {
          //     color: '#0c3e81'
          //   }
          // },
          indicator: source.indicator
        },
        series: buildSeries(source.data)
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('myChart3'))
      this.option3 = {
        grid: {
          containLabel: true
        },
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          radius: '85%',
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            // roundCap: true,
            clip: false,
            width: 10,
            itemStyle: {
              color: 'rgb(68, 114, 196)'
            }
          },
          axisLine: {
            lineStyle: {
              width: 20,
              color: [[1, 'rgba(23, 25, 29, 0.05)']]
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [
            {
              value: this.option3Data,
              name: this.option3Title,
              title: {
                offsetCenter: ['0%', '30%']
              },
              detail: {
                offsetCenter: ['0%', '-10%']
              }
            }
          ],
          title: {
            fontSize: 16,
            color: 'rgb(68, 114, 196)'
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 32,
            color: 'rgb(68, 114, 196)',
            formatter: '{value}%'
          }
        }]
      }
      this.myChart3.setOption(this.option3)
    },
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('myChart4'))
      this.option4 = {
        color: ['#00A3FF', '#00DBD4', '#F3A52A', '#5F83FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let level1 = params[0].value + params[1].value
            let level2 = level1 + params[2].value
            let level3 = level2 + params[3].value
            let level4 = level3 + params[4].value
            return params[4].seriesName + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level3.toFixed(2) + '-' + level4.toFixed(2) + '分' + '<br>' +
              params[3].seriesName + '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level2.toFixed(2) + '-' + level3.toFixed(2) + '分' + '<br>' +
              params[2].seriesName + '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level1.toFixed(2) + '-' + level2.toFixed(2) + '分' + '<br>' +
              params[1].seriesName + '&nbsp;:&nbsp;&nbsp;' + params[0].value.toFixed(2) + '-' + level1.toFixed(2) + '分' + '<br>'
          }
        },
        legend: {
          left: 'right',
          data: ['0%-25%', '25%-50%', '50%-75%', '75%-100%']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisLabel: {
            interval: 0,
            rotate: 40
          },
          data: this.option4XData
        },
        yAxis: {
          type: 'value',
          min: 0
        },
        series: [
          {
            name: '',
            barWidth: 22,
            type: 'bar',
            stack: '总量',
            show: false,
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: this.option4Bar1Data
          },
          {
            name: '75%-100%',
            type: 'bar',
            show: 'false',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar2Data
          },
          {
            name: '50%-75%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'bottom'
            },
            data: this.option4Bar3Data
          },
          {
            name: '25%-50%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar4Data
          },
          {
            name: '0%-25%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar5Data
          }
        ]
      }
      this.myChart4.setOption(this.option4)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.index-body {
  height: 244px;
}
.index-title {
  width: 100%;
  height: 16px;
}
.index-content {
  width: 100%;
  margin-top: 20px;
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00A3FF;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #4B5463;
  font-size: 13px;
  line-height: 15px;
}
.total-index-body {
  height: 86px;
  background: rgba(255, 255, 255, 0.5);
  padding: 11px 5px 0px 5px;
}
.total-index-title {
  width: 100%;
  height: 28px;
  font-size: 12px;
  color: #4B5463;
  text-align: center;
}
.total-index-value {
  font-size: 24px;
  color: #00A3FF;
  font-weight: 600;
  margin-top: 10px;
  text-align: center;
}
/deep/ .el-table__expanded-cell {
  border-bottom: 0px;
  border-right: 0px;
  padding: 0px 0px 0px 47px;
}
.table-in-table {
  border-top: 0px;
}
.first-table /deep/ .el-table__expanded-cell {
  background-color: #E0EDFF;
  &:hover{
    background-color: #E0EDFF !important;
  }
}
.head-body {
  background: #FFFFFF;
  margin-top: 5px;
  border-radius: 6px;
  width: 100%;
  height: 180px;
  padding: 5px 7px;
  overflow: hidden;
  .head-body-box {
    width: 100%;
    overflow: hidden;
    .head-body-left {
      width: 90%;
      overflow: hidden;
    }
    .head-body-right {
      width: 13%;
      margin-bottom: 5px;
      float: right;
    }
  }
}
.head-body-box > div {
  float: left;
}
.isMove {
  width: 65%;
  padding: 3px;
  background: #DFEAF5;
  overflow: hidden;
  float: left;
  font-size: 12px;
}
.collapse-title {
  flex: 1 0 90%;
  order: 1;
}
/deep/ .ranking-table-row1 {
  background-color: #F2F7FF;
}
/deep/ .ranking-table-row2 {
  background-color: #D6E6FF;
}
/deep/ .el-table__body .is-center .cell {
  padding-left: 0;
  padding-right: 0;
}
/deep/ .el-collapse-item__header {
  background: rgba(0, 0, 0, 0);
}
/deep/ .el-collapse-item__wrap {
  background: rgba(0, 0, 0, 0);
}
/deep/ .el-collapse-item__content {
  padding-bottom: 15px;
}
.second-table /deep/ .el-table__expanded-cell {
  background-color: #E0EDFF;
  &:hover{
    background-color: #E0EDFF !important;
  }
}
/deep/ .first-table-row1 {
  background-color: #E5F0FF;
}
/deep/ .first-table-row2 {
  background-color: #D6E6FF;
}
.ranking-table /deep/ .gutter {
  background-color: rgb(238, 245, 255);
}
.ranking-table /deep/ .el-table__body-wrapper {
  background-color: rgb(238, 245, 255);
}
.first-table /deep/ .gutter {
  background-color: rgb(230, 241, 255);
}
.first-table /deep/ .el-table__body-wrapper {
  background-color: rgb(238, 245, 255);
}

.main ::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
